<template>
  <div class='device-dialog'>
    <el-dialog class="large_dialog" :title="title" :visible.sync="show" :append-to-body="true" top="10px">
      <div class="dialog-content flex-column">
        <div class="content-header flex">
          <el-button v-for="(item,index) in tabsList" type="primary" :key="item.label + index" :class="currentComponent === item.component ? 'btn_group_active' : 'btn_group'" @click="clickTabs(item.component)">
            {{ item.label }}
          </el-button>
        </div>
        <transition name="tab" mode="out-in">
          <keep-alive>
            <component :is="currentComponent" v-model="deviceCode"></component>
          </keep-alive>
        </transition>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RealTimeVideo from './RealTimeVideo.vue'
import ReplayTheater from './ReplayTheater.vue'
export default {
  data () {
    return {
      // 弹框标题
      title: '设备详情',
      // 设备编码
      deviceCode: '',
      // 弹框显示状态
      show: false,
      // 按钮列表
      tabsList: [
        {
          label: '实时视频',
          component: 'RealTimeVideo'
        },
        {
          label: '录像回放',
          component: 'ReplayTheater'
        },
        {
          label: '平面图位置',
          component: 'planePostion'
        }
      ],
      // 当前默认组件
      currentComponent: 'RealTimeVideo',
    };
  },
  computed: {},
  watch: {},
  methods: {
    dialogShow (title, deviceCode) {
      this.title = title;
      this.deviceCode = deviceCode;
      this.show = true;
      this.currentComponent = 'RealTimeVideo'
    },
    clickTabs (comp) {
      this.currentComponent = comp
    }
  },
  created () {

  },
  mounted () {

  },
  components: {
    RealTimeVideo,
    ReplayTheater
  },
}
</script>

<style lang='less' scoped>
@dialogHeight: 750px;
@dialogPadding: 30px;
.dialog-content {
  height: calc(@dialogHeight - @dialogPadding);
  .content-header {
    height: 30px;
    margin-bottom: 15px;
  }
  .content-body {
    flex: 1;
    height: calc(@dialogHeight - 60px);
  }
}
</style>